<template>
	<view class="page-wrap">
		<view class="mapbox">
			<map style="width: 750rpx; height: 100vh;" :latitude="latitude" :longitude="longitude" :markers="markers" :circles="circles"
			 scale="18" :enable-traffic="false" :show-compass="true" :enable-overlooking="true" :enable-satellite="true" @markertap="clickicon">
			</map>
		</view>
	</view>
</template>

<script>
	import {
		checkOpenGPSServiceByAndroid , gpsToGcj
	} from "@/common/index.js"
	import {
		getSite
	} from "@/api/site.js"
	import {
		readCarList
	} from "@/api/car.js"
	export default {
		data() {
			return {
				latitude: 39.909,
				longitude: 116.39742,
				circles: [], //圆
				markers: [],
				queryInfo: {
					type: 1,
					action: "project",
					projectId: uni.getStorageSync('id')
				},
				timer: null,
				len: 0,
				
			};
		},
		created() {
			checkOpenGPSServiceByAndroid()
			this.getSiteData()
			this.getCarSite()
			this.startInterval()
		},
		destroyed() {
			clearInterval(this.timer)
		},
		onShow() {
			// this.getLocationInfo()
		},
		methods: {
			// 获取地理位置
			getLocationInfo() {
				var that = this
				this.markers = []
				uni.getLocation({
					type: 'gcj02',
					success(res) {
						clearInterval(that.timer)
						let marker = {
							id: 0,
							latitude: res.latitude,
							longitude: res.longitude,
							iconPath: '/static/positionRed.png',
							label: {
								content: "当前位置"
							}
						};
						// let circle = { //在地图上显示圆
						// 	latitude: res.latitude,
						// 	longitude: res.longitude,
						// 	fillColor: "#66666666", //填充颜色
						// 	color: "#A7B6CB", //描边的颜色
						// 	radius: 0, //半径
						// 	strokeWidth: 2 //描边的宽度
						// };

						that.latitude = res.latitude
						that.longitude = res.longitude
						// that.form.latitude = res.latitude
						// that.form.longitude = res.longitude
						
						that.markers.push(marker)
						// that.circles.push(circle)
						
						this.$forceUpdate()
					},fail: (err) =>{
						uni.showToast({
							title:"定位失败，正在重连...",
							icon:"none"
						})
						if(!this.timer){
							checkOpenGPSServiceByAndroid() //判断是否打开了定位
							this.timer = setInterval(() =>{
								this.getLocationInfo()
							}, 2000)
						}
						// checkOpenGPSServiceByAndroid() //判断是否打开了定位
						// setTimeout(() =>{
						// 	this.getLocationInfo()
						// } , 2000)
					}
				});
			},
			clickicon(){
				console.log('okk')
			},
			startInterval(){
				this.timer = setInterval(() =>{
					this.getCarSite()
				}, 5000)
			},
			async getCarSite(){
				let {result: res} = await readCarList(this.queryInfo)
				this.markers.splice(this.len , this.markers.length - this.len)
				res.forEach((item , index) =>{
					let map = {
						iconPath: "/static/positionone.png",
						title: item.name,
						width: "30px",
						height: "30px",
						label: {
							content: `车牌号：${item.carNumber}`
						},
					}
					if(item.status === 'ONLINE'){
						map.iconPath = "/static/car-map.png"
					}  else {
						map.iconPath = "/static/car-map-b.png"
					}
					let pos = gpsToGcj(item.data.Longitude , item.data.Latitude)
					
					map.id = index + 999
					map.latitude = pos[1]
					map.longitude = pos[0]
					this.markers.push(map)
					
				})
				console.log(res);
			},
			getSiteData() {
				console.log("查询地点");
				// this.markers = []
				// this.circles = []
				getSite({
					projectId: uni.getStorageSync('id')
				}).then(res => {
					// console.log(res)
					if (res.code !== 1) {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
						return
					}
					if(res.result.length === 0){
						this.getLocationInfo()
						return
					}
					res.result.forEach((item, index) => {
						let map = {
							iconPath: "/static/positionone.png",
							title: item.name,
							width: "30px",
							height: "30px",
							label: {
								content: item.name
							},
						}
						if(item.type === '1'){
							map.iconPath = "/static/positionGreen.png"
						} else if(item.type === '2'){
							map.iconPath = "/static/positionYellow.png"
						}
						// console.log(item)
						let cir = {
							fillColor: "#4C4C4C4C", //填充颜色
							color: "#A7B6CB", //描边的颜色
							radius: 50, //半径
							strokeWidth: 2
						}
						
						let pos = gpsToGcj(item.longitude , item.latitude)
						
						if(index === 0){
							this.latitude = pos[1]
							this.longitude = pos[0]
						}
						map.id = index + 1
						map.latitude = pos[1]
						map.longitude = pos[0]
						
						cir.latitude = pos[1]
						cir.longitude = pos[0]
						cir.radius = item.scope
						// console.log(cir)
						this.markers.push(map)
						this.circles.push(cir)
						// this.$forceUpdate()
						
					})
					
					this.len = this.markers.length
					this.getCarSite()
				})
				// console.log(this.circles)
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page-wrap {
		height: 100%;

		.page-body {
			background-color: red;
			height: 100%;

			.page-section {
				width: 100%;
				height: 100%;
			}
		}
	}

	#container {
		background-color: red;
	}
</style>
